<template>
    <div class="clientLog-page">
        <el-card class="clientLog-page__header">
            <div class="clientLog-page__header-inputs">
                <el-select v-model="queryCriteria.clientType" :placeholder="$t('versionManagement.version15')">
                    <el-option v-for="option in clientTypeOptions" :key="option.value" :value="option.value"
                        :label="option.label" />
                </el-select>
                <el-input v-model="queryCriteria.version" :placeholder="$t('versionManagement.version11')"
                    :clearable="true" />
                <el-date-picker v-model="queryCriteria.date" :end-placeholder="$t('versionLogManagement.version02')"
                    :start-placeholder="$t('versionLogManagement.version01')" format="yyyy-MM-dd" type="daterange"
                    value-format="yyyy-MM-dd" />

            </div>
            <div class="clientLog-page__header-buttons">
                <el-button type="primary" icon="el-icon-search" @click="toSearch">
                    {{ $t('versionLogManagement.version00') }}
                </el-button>

                <el-button @click="toRest">
                    {{ $t('add.add124') }}
                </el-button>
            </div>
        </el-card>
        <el-card class="clientLog-page__body">
            <div class="clientLog-page__body-table-box">
                <el-table :data="tableData">
                    <el-table-column prop="originalVersion" :label="$t('versionManagement.version10')" align="center">
                        <template #default="scope">{{ getClientTypeLabel(scope.row.clientType) }}</template>
                    </el-table-column>
                    <el-table-column prop="version" :label="$t('versionManagement.version04')" align="center" />
                    <el-table-column prop="time" :label="$t('versionManagement.version60')" align="center" />
                    <el-table-column prop="ip" :label="$t('versionLogManagement.version08')" align="center" />

                </el-table>
            </div>
            <el-pagination background :current-page="pageable.page" :page-size="pageable.pageSize"
                :page-sizes="[10, 20, 50, 100]" :total="pageable.total" layout="total, sizes, prev, pager, next, jumper"
                @size-change="onPageSizeChange" @current-change="onPageChange" />
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'VersionLogManagement',
    data() {
        return {
            queryCriteria: {
                clientType: '',
                version: '',
                date: [],

            },

            tableData: [],
            pageable: {
                total: 0,
                page: 1,
                pageSize: 10,
            },
            clientTypeOptions: [
                {
                    value: '9',
                    label: 'DentalScanner3.0',
                },
                {
                    value: '8',
                    label: 'DentalScanner2.0',
                },
                {
                    value: '2',
                    label: 'IntraoralScanner',
                },
                {
                    value: '4',
                    label: 'OrthoSimulator',
                },
                {
                    value: '6',
                    label: 'Splintdesign',
                },
                {
                    value: '7',
                    label: 'Crowndesign',
                },
            ],
        };
    },
    mounted() {
        this.fetchVersionLogList();
    },
    methods: {
        getClientTypeLabel(value) {

            const index = this.clientTypeOptions.findIndex((e) => e.value === value);
            if (index !== -1) return this.clientTypeOptions[index].label;
            return '';
        },
        toSearch() {
            this.pageable.page = 1;
            this.fetchVersionLogList();
        },
        toRest() {
            this.queryCriteria = {
                clientType: '',
                version: '',
                date: [],
            };
            this.toSearch();
        },
        fetchVersionLogList() {
            let startTime = '';
            let endTime = '';
            if (this.queryCriteria.date && this.queryCriteria.date.length > 0) {
                startTime = this.queryCriteria.date[0];
                endTime = this.queryCriteria.date[1];
            }
            const { page, pageSize: limit } = this.pageable;
            const { clientType,version } = this.queryCriteria;
            const paramStr = `clientType=${clientType}&version=${version}&startTime=${startTime}&endTime=${endTime}&page=${page}&limit=${limit}`;
            this.$http
                .get(`clientsoftwaredownloadlog/page?${paramStr}`)
                .then(({ data: res }) => {
                    if (res.code === 0 && res.data) {
                        const { list, total } = res.data;
                        this.pageable.total = total;
                        this.tableData = list;
                        if (this.tableData.length <= 0 && this.pageable.page > 1) {
                            this.pageable.page -= 1;
                            this.fetchVersionLogList();
                        }
                    } else {
                        this.tableData = [];
                        this.pageable.page = 1;

                    }
                })
                .catch((e) => {
                    console.error(e);
                });
        },
        onPageChange(page) {
            this.pageable.page = page;
            this.fetchVersionLogList();
        },
        onPageSizeChange(pageSize) {
            this.pageable.pageSize = pageSize;
            this.fetchVersionLogList();
        },

    },
};
</script>
<style lang="scss" scoped>
.clientLog-page {
    width: 100%;
    height: 100%;

    &__header {
        width: 100%;
        height: 80px;

        ::v-deep .el-card__body {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        &-inputs {
            display: flex;
            align-items: center;
            gap: 20px;

            ::v-deep .el-input {
                width: 300px;
            }

            ::v-deep .el-date-editor {
                width: 340px;
            }
        }
    }

    &__body {
        margin-top: 20px;
        height: calc(100% - 100px);
        width: 100%;

        ::v-deep .el-pagination {
            margin-top: 8px;
        }
    }
}
</style>